<template>
  <div class="post-comment">
    <van-field
      v-model.trim="message"
      rows="2"
      autosize
      type="textarea"
      maxlength="120"
      placeholder="在此输入评论,点赞更高将更前排"
      show-word-limit
      center
      clearable
      autofocus
    >
      <template #button>
        <van-button
          size="mini"
          plain
          type="default"
          :disabled="message ? false : true"
          @click="addComment"
          >发 布</van-button
        >
      </template>
    </van-field>
  </div>
</template>
<script>
import { addCommentsOrReply } from '@/api/comment'
import { Toast } from 'vant'
export default {
  name: 'PostComment',
  data () {
    return {
      message: ''
    }
  },
  created () {},
  methods: {
    async addComment () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      if (!this.message) {
        Toast.fail('请填写后再发布')
        return
      }

      try {
        const { data } = await addCommentsOrReply({
          orId: this.orId, // 文章id，或评论id
          content: this.message, // 评论或回复内容
          art_id: this.articleId || null // 传入为添加回复,不传入则为添加文章评论
        })
        this.$emit('update-comments', data.data) // 将最新发布评论传递到父组件
        this.$emit('update-commentscount') // 更新总评论数
        Toast.success('评论成功')
        this.message = ''
      } catch (error) {
        return error
      }
    }
  },
  components: {},
  props: {
    orId: {
      type: [Number, String],
      required: true
    },
    articleId: {
      type: [Number, String, Object],
      default: null
    }
  },
  watch: {},
  computed: {},
  mounted () {}
}
</script>

<style lang="less" scoped></style>
